<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useWardrobesStore } from '../stores/wardrobes'
import { ElMessage } from 'element-plus'
import { Picture, VideoPlay, Plus } from '@element-plus/icons-vue'

const store = useWardrobesStore()
const submitting = ref(false)
const isDesktop = ref(false)

const form = reactive({
  code: '',
  name: '',
  location: '',
  specs: '',
  buy_price: 0,
  images: [],
  videos: [],
  parking_fee: 0,
  labor_fee: 0,
})

function addImage(url) { 
  if (url && url.trim()) {
    form.images.push(url.trim())
    ElMessage.success('图片URL已添加')
  }
}

function addVideo(url) { 
  if (url && url.trim()) {
    form.videos.push(url.trim())
    ElMessage.success('视频URL已添加')
  }
}

async function submit() {
  if (!form.code || !form.name || !form.location) {
    ElMessage.error('请填写必填项')
    return
  }
  
  submitting.value = true
  try {
    await store.createDisassembly({
      code: form.code,
      name: form.name,
      location: form.location,
      specs: form.specs,
      buy_price: Number(form.buy_price),
      images: form.images,
      videos: form.videos,
      parking_fee: Number(form.parking_fee),
      labor_fee: Number(form.labor_fee),
    })
    
    ElMessage.success('衣柜创建成功！')
    Object.assign(form, {
      code: '', name: '', location: '', specs: '', buy_price: 0,
      images: [], videos: [], parking_fee: 0, labor_fee: 0
    })
  } catch (error) {
    ElMessage.error('创建失败：' + error.message)
  } finally {
    submitting.value = false
  }
}

// 检测设备类型
function detectDevice() {
  const userAgent = navigator.userAgent.toLowerCase()
  const isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
  const isTablet = /tablet|ipad/i.test(userAgent)
  const screenWidth = window.innerWidth
  
  isDesktop.value = !isMobile && !isTablet && screenWidth > 1024
}

onMounted(() => {
  detectDevice()
  window.addEventListener('resize', detectDevice)
})
</script>

<template>
  <div class="disassembly-container" :class="{ 'desktop': isDesktop }">
    <div class="page-header">
      <h1>📦 待拆 - 新增衣柜</h1>
      <p>记录待拆衣柜的基本信息、媒体资料和费用</p>
    </div>

    <el-card class="form-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">基本信息</span>
          <el-tag type="warning" size="small">待拆状态</el-tag>
        </div>
      </template>

      <el-form :model="form" label-width="120px" class="disassembly-form">
        <div class="form-grid">
          <el-form-item label="编号" required>
            <el-input 
              v-model="form.code" 
              placeholder="请输入衣柜编号"
              class="form-input"
            />
          </el-form-item>

          <el-form-item label="名称" required>
            <el-input 
              v-model="form.name" 
              placeholder="请输入衣柜名称"
              class="form-input"
            />
          </el-form-item>

          <el-form-item label="位置" required>
            <el-input 
              v-model="form.location" 
              placeholder="请输入存放位置"
              class="form-input"
            />
          </el-form-item>

          <el-form-item label="收购价" required>
            <el-input-number 
              v-model="form.buy_price" 
              :min="0" 
              :precision="2"
              placeholder="0.00"
              class="form-input"
            />
            <span class="unit">元</span>
          </el-form-item>
        </div>

        <el-form-item label="规格">
          <el-input 
            type="textarea" 
            v-model="form.specs" 
            placeholder="请输入衣柜规格信息"
            :rows="3"
            class="form-input specs-input"
          />
        </el-form-item>

        <el-divider content-position="left">
          <span class="divider-title">📸 媒体资料</span>
        </el-divider>

        <div class="media-section">
          <div class="media-grid">
            <el-form-item label="图片URL">
              <div class="url-input-group">
                <el-input 
                  @keyup.enter="addImage($event.target.value); $event.target.value=''" 
                  placeholder="输入图片URL后按回车添加"
                  class="url-input"
                />
                <el-button type="primary" @click="addImage($event.target.previousElementSibling.value); $event.target.previousElementSibling.value=''">
                  添加
                </el-button>
              </div>
              <div class="media-tags">
                <el-tag 
                  v-for="(url, i) in form.images" 
                  :key="i" 
                  closable 
                  @close="form.images.splice(i,1)"
                  type="success"
                  class="media-tag"
                >
                  <el-icon><Picture /></el-icon>
                  {{ url.length > 30 ? url.substring(0, 30) + '...' : url }}
                </el-tag>
              </div>
            </el-form-item>

            <el-form-item label="视频URL">
              <div class="url-input-group">
                <el-input 
                  @keyup.enter="addVideo($event.target.value); $event.target.value=''" 
                  placeholder="输入视频URL后按回车添加"
                  class="url-input"
                />
                <el-button type="primary" @click="addVideo($event.target.previousElementSibling.value); $event.target.previousSibling.value=''">
                  添加
                </el-button>
              </div>
              <div class="media-tags">
                <el-tag 
                  v-for="(url, i) in form.videos" 
                  :key="i" 
                  closable 
                  @close="form.videos.splice(i,1)"
                  type="info"
                  class="media-tag"
                >
                  <el-icon><VideoPlay /></el-icon>
                  {{ url.length > 30 ? url.substring(0, 30) + '...' : url }}
                </el-tag>
              </div>
            </el-form-item>
          </div>
        </div>

        <el-divider content-position="left">
          <span class="divider-title">💰 费用信息</span>
        </el-divider>

        <div class="fees-section">
          <el-form-item label="停车费">
            <el-input-number 
              v-model="form.parking_fee" 
              :min="0" 
              :precision="2"
              placeholder="0.00"
              class="form-input"
            />
            <span class="unit">元</span>
          </el-form-item>

          <el-form-item label="工时费">
            <el-input-number 
              v-model="form.labor_fee" 
              :min="0" 
              :precision="2"
              placeholder="0.00"
              class="form-input"
            />
            <span class="unit">元</span>
          </el-form-item>
        </div>

        <el-form-item class="submit-section">
          <el-button 
            type="primary" 
            size="large" 
            @click="submit"
            :loading="submitting"
            class="submit-btn"
          >
            <el-icon><Plus /></el-icon>
            创建待拆衣柜
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.disassembly-container {
  max-width: 1000px;
  margin: 0 auto;
}

.disassembly-container.desktop {
  max-width: none;
  margin: 0;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.page-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-header p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.form-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #303133;
}

.disassembly-form {
  padding: 20px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.desktop .form-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.form-input {
  width: 100%;
}

.specs-input {
  max-width: none;
}

.desktop .specs-input {
  max-width: 800px;
}

.unit {
  margin-left: 8px;
  color: #909399;
  font-size: 14px;
}

.divider-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #606266;
}

.media-section {
  margin: 20px 0;
}

.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.desktop .media-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.url-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.url-input {
  flex: 1;
}

.media-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-tag {
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.fees-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.desktop .fees-section {
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 600px;
}

.submit-section {
  text-align: center;
  margin-top: 40px;
}

.submit-btn {
  padding: 15px 40px;
  font-size: 1.1rem;
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .fees-section {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .url-input-group {
    flex-direction: column;
  }
  
  .submit-btn {
    width: 100%;
    padding: 15px 20px;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.8rem;
  }
  
  .page-header p {
    font-size: 1rem;
  }
  
  .form-card {
    margin: 0 10px;
  }
}
</style>


